<template>
	<view>
		<view class="uni-padding-wrap uni-common-mt">
			<view class="uni-flex uni-column">
				<view class="flex-item-V">
					<view class="uni-text uni-center">
						游戏规则：100 分为基础，一分 50 元
					</view>
				</view>
				<view class="flex-item-V">
					<view class="point">
						<view class="point-txt uni-badge-blue">{{ point }}</view>
					</view>
				</view>
				<view class="flex-item-V history">
					<scroll-view scroll-top="0" scroll-y="true" class="scroll-Y flex-item-V">
						<view v-for="item in history" class="history-item">
							<view v-if="item.type == 1" class="scroll-view-item ">
								<view class="uni-flex uni-row">
									<view class="text history-content">{{ item.content }}</view>
									<view class="text history-time">{{ item.createTime | formatDate }}</view>
								</view>
							</view>
							<view v-else-if="item.type == 0" class="scroll-view-item uni-bg-blue">
								<view class="uni-flex uni-row">
									<view class="text history-content">{{ item.content }}</view>
									<view class="text history-time">{{ item.createTime | formatDate }}</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="flex-item-V">
					<view class="uni-flex uni-row">
						<button class="subtract" type="warn" 	@click="subtract">➖</button>
						<button class="add" 	 type="primary" @click="add">➕</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				point: '100',
				history: [
					{
						'type': 0,
						'content': '默认内容',
						'createTime': '2021-08-24'
					},
					{
						'type': 1,
						'content': '请求错误，请打开网络或联系管理员！！',
						'createTime': '2021-08-24'
					}
				]
			}
		},
		methods: {
			add: function() {
				uni.navigateTo({
					url: '../add/add'
				});
			},
			
			subtract: function() {
				uni.navigateTo({
					url: '../subtract/subtract'
				});
			}
		},
		onShow: function() {
			const point = this.$request({
				url: this.$api.info
			})
			.then((res) => {
				this.point = res.data.data.point;
			});
			
			const history = this.$request({
				url: this.$api.histroyList,
				method: 'POST'
			})
			.then((res) => {
				if (res.statusCode == 200) {
					this.history = res.data.data;
				}
			});
		}
	}
</script>

<style>
	.height-50 {
		height: 50rpx;
	}
	
	.flex-item-V {
		width: 100%;
		height: 150rpx;
		line-height: 150rpx;
	}
	
	.scroll-Y {
		width: 100%;
		height: 450rpx;
	}
	
	.scroll-view-item {
		width: 100%;
		height: 50rpx;
		line-height: 50rpx;
		/* margin: 10rpx 20rpx; */
		padding: 10rpx;
	}
	
	.point {
		font-size: 100rpx;
		text-align: center;
	}
	
	.add, .subtract {
		-webkit-flex: 1;
		flex: 1;
		margin: 50rpx;
	}
	
	.add {
		/* background-color: #09BB07; */
	}
	
	.subtract {
		/* background-color: $uni-bg-green; */
	}
	
	.history {
		height: 450rpx;
		margin: 50rpx 0 200rpx;
	}
	
	.history-item {
		margin: 5rpx 0;
	}
		
	.history-content {
		-webkit-flex: 1;
		flex: 1;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}
	
	.history-time {
		width: 200rpx;
	}
</style>
